<!-- blog_detail.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
     <!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<script src="js/jquery.min.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>
</head>
<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/logo1.jpg" alt="">
        <span >我的博客系统</span>
        <!-- 空白元素用来占位 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>
    <!-- 这里的.container作为页面的版心 -->
    <div class="container">
        <div class="left">
        <!-- 左侧个人信息 -->
          <div class="card">
          <img src="image/user.jpg" alt="">
           <h3></h3>
           <a href="#">github地址</a>
           <div class="counter">
            <span>文章</span>
            <span>分类</span>
           </div>
           <div class="counter">
            <span>2</span>
            <span>3</span>
           </div>
        </div>
    </div>
        <div class="right">
           <!-- 右侧内容详情 -->
           <!-- 用这个div来包裹整个页面的内容详情 -->
           <div class="blog_content">
              <h3></h3>
              <div class="data"></div>
              <!-- 博客的正文内容 -->
              <div id="content" style="opacity: 80%;"></div>
            </div>

           </div>
           
    </div>
    
    <script>
      function getBlogDetail(){
        $.ajax({
          type: 'get',
          //location.search 拿到了形如 '?blogId=5' 这样的一段内容
          url: 'blog' + location.search,
          success: function(body){
            // 根据body 中的内容来构造页面
            // 1/ 构造博客标题
            let h3 = document.querySelector(".blog_content>h3");
            h3.innerHTML = body.title;
            // 2/构造博客发布时间
            let dataDiv = document.querySelector('.data');
            dataDiv.innerHTML = body.postTime;
            //构造正文
            //如果直接把content 设为 innerHTML.此时展示的界面内容是原始的 Markdown 字符串
            //咱们需要的是渲染后的,带有格式的效果
            //let content = doucment.querySelect('#content');
            //content.innerHTML=body.content;
            editormd.markdownToHTML('content',{
              markdown: body.content
            });
          }

        });
      }
      getBlogDetail();

      //这里面有一个关键代码,要在第一个Ajax的回调中执行第二个Ajax ,才能保证两个Ajax函数的先后执行,成为串行化执行

      //加上一个逻辑,通过 get/ login 这个接口来获取下当前的登录状态
    function getUserInfo(pageName){
        $.ajax({
            type:'get',
            url:'login',
            success: function(body){
                //判定此处的 body 是不是一个有效的 user 对象(userID 是否为0)
                if(body.userId && body.userId > 0){
                    //登录成功!不做处理
                    console.log("当前用户登陆成功!用户名: "+body.username);
                   // 在 getUserInfo 的回调函数中,来调用作者信息
                   getAuthorInfo(body);

                }else{
                    //登录失败!
                    //让前端页面跳转到 login.html
                    alert("当前您并未登录!请登录后再访问博客列表!");
                    location.assign('blog_login.html');
                }
            },
            error: function(){
                alert("您当前尚未登录!请登录后再访问博客列表!");
                location.assign('blog_login.html');
            }
        });
    }
    

    //判定用户的登录状态
    getUserInfo("blog_detail.html");

    function changeUserName(username){
        let h3 = document.querySelector('.card>h3');
        h3.innerHTML=username;
    }

      

      //从服务器获取一下当前博客的作者信息,并显示到界面上
      //参数 user 就是刚才从服务器拿到的当前登录用户的信息
      function getAuthorInfo(user){
        $.ajax({
          type:'get',
          url:'authorInfo'+location.search,
          success: function(body){
            //此处的body就是服务器返回的 User 对象,是文章的作者信息
            if(body.username){
              //如果响应中的 username 存在,就把这个值设置到页面中
              changeUserName(body.username);
              if(body.username==user.username){
                //作者和登录的用户是同一个人,则显示"删除"按钮
                let navDiv = document.querySelector('.nav');
                let a = document.createElement('a');
                a.innerHTML = '删除';
                //期望点击删除构造一个形如 blogDelete?blogId=6 这样的请求
                a.href = 'blogDelete' + location.search;
                navDiv.appendChild(a);
              }
            }else{
              console.log("获取作者信息失败!"+body.reason);
            }
          }
        });
      }
      getAuthorInfo();
    </script> 
</body>
</html>
